<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="bg-gray-100 full-screen-120px">
    <!-- 顶部用户信息区域 -->
    <view class="bg-blue-400 p-6">
      <view class="flex items-center min-h-24">
        <image :src="avatar" class="image-avatar-16" />
        <!-- 已登录 -->
        <view class="ml-3" v-if="userStore.isLogined">
          <view class="text-white text-size-xl">{{ userStore.userInfo.nickname }}</view>
        </view>
        <!-- 未登录 -->
        <view class="ml-3" v-else>
          <view class="text-white text-size-xl ml-1" @click="handleLoginTextClick">
            登录 / 注册
          </view>
        </view>
      </view>

      <!-- 功能快捷入口 -->
      <view class="grid grid-cols-4 bg-white rounded-lg mt-4 p-4">
        <view
          v-for="(item, index) in quickActions"
          :key="index"
          class="flex flex-col items-center"
          @click="handleQuickActionClick(item, index)"
        >
          <view :class="['w-10 h-10 rounded-full flex items-center justify-center', item.bgColor]">
            <text :class="['iconfont', item.icon, 'text-white']"></text>
          </view>
          <text class="mt-2 text-sm">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="list-cell list-cell-arrow" @click="handleProfileClick">
        <view class="menu-item-box">
          <wd-icon name="edit-outline" size="1rem" custom-class="ml-1 mr-2"></wd-icon>
          <view>编辑资料</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleAppSettingClick">
        <view class="menu-item-box">
          <wd-icon name="setting1" size="1rem" custom-class="ml-1 mr-2"></wd-icon>
          <view>应用设置</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { ref } from 'vue'

const userStore = useUserStore()
const avatar = computed(() => {
  if (userStore.isLogined && userStore.userInfo.avatar) {
    return userStore.userInfo.avatar
  } else {
    return '/static/images/avatar/default.jpg'
  }
})

// 快捷功能入口
interface QuickAction {
  name: string
  icon: string
  bgColor: string
}
const quickActions = ref<QuickAction[]>([
  { name: '功能点1', icon: 'icon-support', bgColor: 'bg-red-500' },
  { name: '功能点2', icon: 'icon-service', bgColor: 'bg-blue-500' },
  { name: '功能点3', icon: 'icon-community', bgColor: 'bg-purple-500' },
  { name: '功能点4', icon: 'icon-like', bgColor: 'bg-green-500' },
])

const handleQuickActionClick = function (action: QuickAction, index: number) {
  uni.showToast({
    title: action.name,
    icon: 'none',
  })
}

const handleLoginTextClick = function () {
  uni.navigateTo({ url: '/pages/me/login/login' })
}

const handleProfileClick = function () {
  uni.navigateTo({ url: '/pages/me/profile/profile' })
}

const handleAppSettingClick = function () {
  uni.navigateTo({ url: '/pages/me/app-settings' })
}
</script>

<style>
/* 这里可以添加自定义样式，但建议尽量使用 UnoCSS 的功能类 */
.list-cell-arrow::before {
  position: absolute;
  top: 50%;
  right: 30rpx;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  content: ' ';
  border-color: #c0c0c0;
  border-style: solid;
  border-width: 2px 2px 0 0;
  -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
}

.list-cell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 26rpx 30rpx;
  color: #333;
  background-color: #fff;
}

.list-cell:first-child {
  border-radius: 8rpx 8rpx 0 0;
}

.list-cell:last-child {
  border-radius: 0 0 8rpx 8rpx;
}

.list-cell::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  content: '';
  border-bottom: 1px solid #eaeef1;
  -webkit-transform: scaleY(0.5) translateZ(0);
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 100%;
}

.menu-list {
  margin: 20px 20px;

  .menu-item-box {
    display: flex;
    align-items: center;
    width: 100%;

    .menu-icon {
      margin-right: 5px;
      font-size: 16px;
      color: #007aff;
    }

    .text-right {
      margin-right: 34rpx;
      margin-left: auto;
      color: #999;
    }
  }
}
</style>
